<template>
  <div class="bubble" v-show="show">
    <slot></slot>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "qipao",
  props: ["config", "selectRangeDate"],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    setData(type) {
      let arr = [];
      switch (type) {
        case "x":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push(
              this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2]
            );
          }
          break;
        case "s":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push((Math.random() * 250).toFixed(0));
          }
          break;

        default:
          break;
      }

      return arr;
    },
    setSeriesData() {
      let arr = [];
      this.config.data.forEach((item) => {
        let obj = {
          name: item.name,
          type: "line",
          smooth: true,
          symbol: "none",
          areaStyle: {
            opacity: 1,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: item.color[0], // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: item.color[0], // 40% 处的颜色
                },
                {
                  offset: 1,
                  color: item.color[1], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0, color: item.color[0] // 0% 处的颜色
            // },
            //     {
            //         offset: 0.4, color: item.color[0] // 0% 处的颜色
            //     }, {
            //         offset: 1, color: item.color[1] // 100% 处的颜色
            //     }]), //背景渐变色
            // origin: 'start'
          },
          lineStyle: {
            width: 0,
          },
          itemStyle: {
            color: item.color[0],
          },
          data: this.setData("s"),
        };
        arr.push(obj);
      });
      return arr;
    },
    setChart() {
      //字符串截取
      let wordLength = (value) => {
        var ret = ""; //拼接加\n返回的类目项
        var maxLength = 10; //每项显示文字个数
        var valLength = value.length; //X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
        if (rowN > 1) {
          //如果类目项的文字大于3,
          for (var i = 0; i < rowN; i++) {
            var temp = ""; //每次截取的字符串
            var start = i * maxLength; //开始截取的位置
            var end = start + maxLength; //结束截取的位置
            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
            temp = value.substring(start, end) + "\n";
            ret += temp; //凭借最终的字符串
          }
          return ret;
        } else {
          return value;
        }
      };
      //
      var data = [
        {
          name: "餐厅实时概况",
          value: "",
        },
        {
          name: "就餐人次",
          value: "1548",
        },
        {
          name: "订餐订单数",
          value: "85",
        },
        {
          name: "食堂销售额",
          value: "36235",
        },
        {
          name: "食堂销售额占比",
          value: "80%",
        },
        {
          name: "总销售额",
          value: "67268",
        },
      ];
      //偏移量
      var offsetData = [
        [50, 80],
        [15, 60],
        [80, 60],
        [90, 30],
        [15, 30],
        [50, 30],
      ];
      //symbolSize 散点气泡大小
      var symbolSizeData = [160, 150, 150, 150, 150, 150];
      //
      //循环定义series的data值
      var datas = [];
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        //var itemToStyle = datalist[i];

        datas.push({
          name: `${item.value}\n\n${wordLength(item.name)}`,

          value: offsetData[i],
          symbolSize: symbolSizeData[i],
          label: {
            show: true,
            //  formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
            fontWeight: "1000",
            fontSize: "18",
            align: "center",
            verticalAlign: "center",
            rich: {
              a: {
                color: "#59EBE8",
                fontSize: 25,
                lineHeight: 30,
                textBorderColor: "transparent",
                textBorderWidth: 0,
              },
              b: {
                color: "#59EBE8",
                fontSize: 14,
                lineHeight: 30,
                textBorderColor: "transparent",
                textBorderWidth: 0,
              },
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [
                {
                  offset: 0,

                  color: "rgba(4,88,120,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(4,30,120,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(1,98,156,0.6)",
                },
              ]),
              opacity: 0.8,
              shadowColor: "#045878",
              shadowBlur: 5,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
            },
          },
        });
      }

      console.log(this.config);
      let option = {
        //   backgroundColor: "transparent",
        backgroundColor: "transparent",
        grid: {
          show: false,
          top: 10,
          bottom: 10,
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30,
          },
        ],

        series: [
          {
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                },
              },
            },

            itemStyle: {
              normal: {
                color: "#00acea",
              },
            },
            data: datas,
          },
        ],
      };

      //   if (this.selectRangeDate.length > 7) {
      //     option.xAxis.axisLabel.interval = 3;
      //     option.xAxis.axisLabel.showMaxLabel = false;
      //     option.xAxis.axisLabel.align = "left";
      //   }
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize({
        width: this.$el.offsetWidth,
        height: this.$el.offsetHeight,
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    //this.setChart();
  },
};
</script>

<style lang="less" scoped>
.bubble {
  position: relative;
  display: inline-block;
  margin: 20px;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.paopao {
  width: 100%;
  height: 100%;
}
</style>
